<template>
  <div class="login admin">
    <div class="admin-main">
      <el-form :model="ruleForm" ref="ruleForm" class="admin-form">
        <div class="app-ib admin-main-left">
          <img src="@/assets/images/common/logo-icon.png" alt />
        </div>
        <div class="app-ib admin-main-right">
          <h6>识别管理后台</h6>
          <h5>Welcome欢迎登录</h5>
          <el-form-item
            prop="account"
            :rules="[
              { required: true, message: '请输入您的账号', trigger: 'blur' },
               { min: 5, max: 32, message: '账号长度在5到32个字符', trigger: 'blur' }
            ]"
            class="admin-form-label"
          >
            <el-input
              v-model.trim="ruleForm.account"
              placeholder="请输入您的账号"
              minlength="6"
              maxlength="64"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="psd"
            :rules="[
              { required: true, message: '请输入您的密码', trigger: 'blur' },
               { min: 6, max: 18, message: '密码长度在6到18个字符', trigger: 'blur' }
            ]"
            class="admin-form-label"
          >
            <el-input
              v-model.trim="ruleForm.psd"
              @keyup.enter.native="submitForm('ruleForm')"
              placeholder="请输入您的密码"
              minlength="6"
              maxlength="18"
              type="password"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="admin-main-right-checkbox">
            <el-checkbox v-model="ruleForm.checked">自动登录</el-checkbox>
          </el-form-item>
          <div class="app-center" style="margin-top: 20px;">
            <el-button round type="primary" class="app-admin" @click="submitForm('ruleForm')">登录</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { loginByUsername } from "@/api/login";
import { mapMutations } from "vuex";
import { setToken, setUserInfo } from '@/utils/auth';
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        account: window.localStorage.getItem("account")
          ? window.localStorage.getItem("account")
          : "",
        psd: window.localStorage.getItem("password")
          ? window.localStorage.getItem("password")
          : "",
        checked: false,
      },
      /* 写死的账号密码 */
      accountPsd: [{
        account: 'admin',
        password: '123456'
      }]
    };
  },
  mounted() {
    // 主页添加键盘事件,注意,不能直接在焦点事件上添加回车
    let that = this;

    /* 自动登录按钮是否选中 */
    if (
      window.localStorage.getItem("loginChecked") &&
      window.localStorage.getItem("loginChecked") !== "false" &&
      window.localStorage.getItem("account") &&
      window.localStorage.getItem("account") !== "" &&
      window.localStorage.getItem("password") &&
      window.localStorage.getItem("password") !== ""
    ) {
      that.ruleForm.checked = true;
      that.ruleForm.account = window.localStorage.getItem("account");
      that.ruleForm.psd = window.localStorage.getItem("password");
      that.getUserInfo();
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getUserInfo();
          // this.$router.push({name:'app-main-home'});
        } else {
          return false;
        }
      });
    },
    getUserInfo() {
      const _this = this;
       
      let params = {
        account: this.ruleForm.account,
        password: this.ruleForm.psd
      };
      let flag = false;
      _this.accountPsd.forEach(function(element, index){
        if (element.account === params.account && element.password === params.password) {
          flag = true;
        }
      });
      if (flag) {
        setToken('eyJhbGciOiJIUzUxMiIsImlhdCI6MTYwNjM2MDExMCwiZXhwIjoxNjA2NDQ2NTEwfQ.eyJ1c2VyX2lkIjoxLCJyb2xlX2lkIjowLCJ1dWlkIjoiYTkwZTMwMDgyZjk0MTFlYjg0MTEwMDE2M2UxMmE4NjMiLCJ1c2VyX3NvdXJjZSI6MH0.TxLzhwPUFkDXQcq-B2kelRsgy7Mn3VGDh4alKdK_1Auj5t1gRDHjAcs4OdPjzllQ09VUzs1j1eWqMPwjOSxgoQ');
        setUserInfo({
          username: '管理员',
          head_image: 'https://omtest.oss-cn-beijing.aliyuncs.com/login_head/1.png'
        });
        window.localStorage.setItem("loginChecked", _this.ruleForm.checked);
        window.localStorage.setItem("account", params.account);
        window.localStorage.setItem("password", params.password);
        _this.$router.push({ path: "/main" });
        // _this.$router.push({ path: "/imageProcess" });
        
      } else {
        _this.$message({
          type: 'warning',
          message: '请输入正确的账号密码'
        });
      }
    }
  }
};
</script>